<template>
  <div class="menu-container">
    <h1>导航菜单</h1>
    <ul class="nav-list">
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path" class="nav-link">
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const routes = router.getRoutes().filter(route => route.path !== '/')
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  height: 100vh;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.nav-list {
  flex:1;
  /*height: calc(100vh - 140px);*/
  list-style: none;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.nav-link {
  display: block;
  padding: 10px;
  margin: 10px 0;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #42b983;
  color: white;
}
</style>
